<template>
	<view class="u-flex-col" style="height :calc(100vh - 44px)">
		<jmy-find-artison
		    button_text="立即预约验收"
		    	flow_chat="https://img.aibbyp.com/wechatUser/jz2.png" 
		    	detail_img="https://img.aibbyp.com/wechatUser/jz3.png"
		    	:worker_type_id="type"
			>
			<template v-slot:top>
				<view :class="bannerStyle"></view>
				
				<view style="margin: -76rpx 40rpx 20rpx 40rpx; background-color: #ffffff;border-radius: 10rpx;padding-bottom: 0;" class="padding bg-white" >
					<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
						<view class="menu-topic-view" v-for="(item,index) in typeList" :id="'tabNum'+item.id" :key="index" @click="swichMenu(index)">
							<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
								<text class="menu-topic-text">{{item.name}}</text>
								<view class="menu-topic-bottom">
									<view class="menu-topic-bottom-color"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					<!-- 内容 -->
					<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
						<swiper-item class="swiper-topic-list" v-for="item in typeList" :key="item.id">
							<view class="swiper-item">
								<text style="color: #FF1900;font-size: 14px;font-weight: bold;">参考价{{item.door_price}} 元/次</text>
								<text style="color: #808080;font-size: 11px;margin-left: 20upx;">任选节点 上门一次</text><br/>
							</view>
						</swiper-item>
					</swiper>
					<view style="color: #808080;font-size: 11px;margin-left: 0;margin-top: -25upx;">150m²以上，别墅复式房型及偏远地区可能会产生额外费用</view>
				</view>
				
				
				
			</template>
		</jmy-find-artison>
	</view>
</template>

<script>
	import FindArtison from "@/components/jmy-find-artison/jmy-find-artison.vue"
	export default {
		data() {
			return {
				type: 1,
				bannerStyle: "banner",
				address:'',
				typeList:[],
				scrollLeft:0,
				currentTab: 0,
				tabCurrent: 'tabNum1',
			}
		},
		methods: {
			getWorkerType(){
				this.$api.get({
					url: '/jmy/worker_type/getListByType?type=4',
					success: res => {
						this.typeList=res
						for(let i=0;i<res.length;i++){
							if(i===0){
								this.type=res[i].id;
							}
						}
					}
				});
			},
			swichMenu(index) {
				this.currentTab = index;
				this.type=this.typeList[index].id;
				//this.tabCurrent = 'tabNum'+ id
				
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				this.scrollLeft = 0;
				for (let i = 0; i < index; i++) {
					this.scrollLeft += 60
				};
			},
			swiperChange(e) {
				let index = e.detail.current
				this.swichMenu(index)
				
			}
		},
		components:{
			FindArtison
		},
		onLoad() {
			this.getWorkerType();
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: rgb(245, 245, 245);

	}

	.content {
		padding: 0px 4% 20px 4%;
	}

	.banner {
		background-image: url("https://img.aibbyp.com/wechatUser/jz1.png");
		width: 100%;
		height: 500upx;
		background-position: right bottom, left top;
		background-repeat: repeat;
		background-size: cover;
	}
	.detail {
		padding: 5%;
		background-color: #FFFFFF;
		border-radius: 10px;
	
	}
	.add-task {
		width: 100%;
		height: 600upx;
		background-color: green;
		border-radius: 10px;
	}
	.noclick {
		width: 35%;
		padding: 20rpx;
		border: 1px solid #E5E5E5;
		border-radius: 10rpx;
		height: 80upx;
		font-size: 13px;
		opacity: 1;
		text-align: center;
	}

	.click {
		width: 35%;
		padding: 20rpx;
		font-size: 30rpx;
		border: 1rpx solid #FF8E81;
		border-radius: 10rpx;
		color: red;
		height: 80upx;
		font-size: 13px;
		opacity: 1;
		text-align: center;
		font-weight: bold;
		background: #FFECEA url("https://img.aibbyp.com/wechatUser/jz2.png") no-repeat right bottom -2px;
	}
	// .body-view {
	// 	width: 100%;
	// 	overflow: hidden;
	// }
	
	.top-menu-view {
		display: flex;
		// position: fixed;
		/* #ifdef H5 */
		/* #endif */
		white-space: nowrap;
		width: 100%;
		// background-color: #fceeee;
		height: 86rpx;
		line-height: 86rpx;
	
		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 80rpx;
			position: relative;
			// border: 1px solid red;
			margin-right: 20upx;
			font-size: 30rpx;
			border: 1px solid #E5E5E5;
			border-radius: 10rpx;
	
			.menu-topic-text {
				font-size: 30rpx;
				color: #303133;
				padding: 10rpx 40rpx;
				font-weight: 500;
			}
	
			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;
	
				.menu-topic-bottom-color {
					width: 40rpx;
					height: 4rpx;
				}
			}
	
			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}
			.menu-topic-act .menu-topic-text{
				font-size: 30rpx;
                color: red;		
			    font-weight: bold;
				height: 80rpx;
				// background: #FFECEA url("https://img.aibbyp.com/wechat/images/artison/微信图片_20231120155100.png") no-repeat right bottom -2px;				
			}
			
	
			.menu-topic-act .menu-topic-bottom-color {
				// background: black;
			}
		}
	}
	.menu-topic-act {
		
		height: 80rpx;
		border-radius: 10rpx;
		border: 1rpx solid #FF8E81;				
		background: #FFECEA url("https://img.aibbyp.com/wechatUser/jz3.png") no-repeat right bottom -2px;				
	}
	
	
	.swiper-box-list {
		width: 95%;
		// margin: 100rpx auto 30rpx;
		padding:20rpx 10rpx;
		flex:1;
		background-color: #FFFFFF;
		height: 100upx;
		.swiper-topic-list {
		     width: 100%;
		 }
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	.uni-scroll-view::-webkit-scrollbar {
		display: block
	}
</style>